<template>
  <div class="container-wrapper">
    <el-container calss="main_data">
      <div class="show_frame">
        <p style="font-size: 25px; text-align: center; margin-top:20px;">部门员工分布</p>
        <div ref="chartRef" style="width: 600px; height: 400px;"></div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="24" >
            <el-card shadow="hover" class="show_card" style="background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic :value="all_staffdata" time-indices title="公司员工总数">
                </el-statistic>
              </div>
            </el-card>
            <el-card shadow="hover" class="show_card" style="background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic :value="all_customerdata" time-indices title="公司客户总数">
                </el-statistic>
              </div>
            </el-card>
            <el-card shadow="hover" class="show_card" style="background-image: linear-gradient(to top, #cd9cf2 0%, #f6f3ff 100%);">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic :value="all_businessdata" time-indices title="公司业务总数">
                </el-statistic>
              </div>
            </el-card>
            <el-card shadow="hover" class="show_card" style="background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);">
              <div style="width: 100%; display: inline-block; ">
                <el-statistic :value="all_orderdata" time-indices title="公司工单总数">
                </el-statistic>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>      
    </el-container>       
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card shadow="hover" class="show_card2" style="background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);">
            <div class="chart-container">
              <div ref="chartRef2" style="width: 60%; height: 600px;"></div>
              <div class="leaderboard">
                <h1 style="font-size: 18px; text-align: center; margin-bottom: 20px; font-weight: bold;">排行榜</h1>
                <el-table :data="rankData" 
                  style="width: 100%; border-radius: 7%;" 
                  :header-cell-style="{ border: '1px solid gold', backgroundColor: 'black', color: 'gold' }" 
                  :row-class-name="tableRowClassName"
                  >
                  <el-table-column prop="rank" label="排名" width="80" align="center "></el-table-column>
                  <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
                  <el-table-column prop="score" label="业绩" align="center"></el-table-column>
                </el-table>
              </div>                          
            </div>
          </el-card>
        </el-col>
      </el-row>
    
    </div>   
  </div>

</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TitleComponent } from 'echarts/components'; // 导入 TitleComponent
import { TooltipComponent } from 'echarts/components'; // 导入 TooltipComponent
import { PieChart } from 'echarts/charts'; // 导入 PieChart

echarts.use([GridComponent, BarChart, CanvasRenderer, TitleComponent, TooltipComponent, PieChart]);


const api = {
  staffnum_url: "api/dep/staff_num",
  allnum_url: "api/staff/staff_num",
  allcust_url: "api/cust/cust_num",
  allbus_url: "api/bus/bus_num",
  allorder_url: "api/wo/order_num",
  career_url: "api/career/show_career",
  rank_url: "api/login/list"
}

const chartRef = ref();
const chartRef2 = ref();
const departmentData = ref([]);
const all_staffdata = ref();
const all_customerdata = ref();
const all_businessdata = ref();
const all_orderdata = ref();
const careerData = ref([]);
const rankData = ref([]);


// 饼图1
const show_num = async () => {
  try {
    let response = await axios.get(api.staffnum_url);
    if (response.data.code === 0) {
      departmentData.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error("获取数据失败，请检查网络连接");
    console.error('获取数据失败', error);
  }
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return; // 确保 DOM 元素已加载
  const myChart = echarts.init(chartRef.value);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '部门员工数量',
        type: 'pie',
        radius: ['40%', '70%'],
        data: departmentData.value.map(item => ({
          value: item.staff_num,
          name: item.name
        }))
      }
    ]
  };
  myChart.setOption(option);
};

// 员工总数
const show_allstaff = async() => {
  try{
    let response = await axios.get(api.allnum_url);
    if (response.data.code === 0){
      all_staffdata.value = response.data.data;
    }else{
      ElMessage.error("response.data.message");
    }
  }catch(error){
    ElMessage.error("获取员工总数失败");
  }
}

// 客户总数
const show_allcustomer = async() => {
  try{
    let response = await axios.get(api.allcust_url);
    if (response.data.code === 0){
      all_customerdata.value = response.data.data;
    }else{
      ElMessage.error("response.data.message");
    }
  }catch(error){
    ElMessage.error("获取客户总数失败");
  }
}

// 业务总数
const show_allbusiness = async() => {
  try{
    let response = await axios.get(api.allbus_url);
    if (response.data.code === 0){
      all_businessdata.value = response.data.data;
    }else{
      ElMessage.error("response.data.message");
    }
  }catch(error){
    ElMessage.error("获取业务总数失败");
  }
}

// 工单总数
const show_allworkorder = async() => {
  try{
    let response = await axios.get(api.allorder_url);
    if (response.data.code === 0){
      all_orderdata.value = response.data.data;
    }else{
      ElMessage.error("response.data.message");
    }
  }catch(error){
    ElMessage.error("获取工单总数失败");
  }
}

// 统计各行业客户数
const show_career = async () => {
  try {
    const response = await axios.get(api.career_url);
    if (response.data.code === 0) {
      careerData.value = response.data.data;
      const industries = careerData.value.map(item => item.career_name);
      const customerCounts = careerData.value.map(item => item.career_num);

      const myChart2 = echarts.init(chartRef2.value);
      const option2 = {
        title: {
          text: '各行业客户分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: industries
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客户数',
            type: 'bar',
            data: customerCounts,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              color: function (params) {
                // 自定义颜色数组
                const colors = ['#C33531', '#EFE42A', '#64BD3D', '#EE9201', '#29AAE3', '#B74AE3', '#0AAF9F', '#E89589', '#16A085', '#F8E71C'];
                return colors[params.dataIndex % colors.length];
              }
            }            
          }
        ]
      };

      myChart2.setOption(option2);
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error("获取各行业客户数失败");
    console.error('获取数据失败', error);
  }
};

// rank


const show_rank = async () => {
  try {
    const response = await axios.get(api.rank_url);
    if (response.data != null) {
      // 排序
      const sortedData = response.data
        .map(item => ({
          rank: 0, 
          name: item.staff_name,
          score: item.performance
        }))
        .sort((a, b) => b.score - a.score); 

      sortedData.forEach((item, index) => {
        item.rank = index + 1; // 排名从1开始
      });

      rankData.value = sortedData.slice(0, 10);  // 更新
      
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error("获取排行榜数据失败");
    console.error('获取排行榜数据失败', error);
  }
};


const tableRowClassName = ({ rowIndex }) => {
  if (rowIndex === 0) {
    return 'first-row'; 
  } else if (rowIndex === 1) {
    return 'second-row'; 
  } else if (rowIndex === 2) {
    return 'third-row'; 
  }
  return 'other-row';
};
// 在组件挂载后获取数据并初始化图表
onMounted(async () => {
  await show_rank();
  await show_num(); 
  await show_allstaff();
  await show_allcustomer();
  await show_allbusiness();
  await show_allworkorder();
  await show_career();
  initChart(); 
});

</script>

<style scoped>
  .container-wrapper{
    display: flex;
    flex-direction: column;
  }
  .show_frame{
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
      url("..\assets\img\business1.png");
    border: 2px solid ; 
    border-radius: 30px;
    margin: 40px; 
    margin-left: 80px; 
    box-shadow: 5px 5px 5px #ababab; 
  }
  .show_card{
    width: 400px; 
    height:87px; 
    margin:40px;
  }
  .show_card2{
    width: 1100px; 
    height:600px; 
    margin:80px;
  }
  .main_data{
    width: 100%;
    height:800px ;
    margin:40px;
    overflow: hidden;
  }
  .chart-container{
    display: flex;
  }
  .leaderboard {
    width: 35%;
    height:200px;    
    margin: 0 auto;
    text-align: center;
  }
  .el-table >>> .first-row {
    background-color: #ffd700 ; 
    border: '1px solid gold';
  }

  .el-table >>> .second-row {
    background-color: silver ; 
    border: '1px solid gold';
  }

  .el-table >>> .third-row {
    background-color: #cd7f32 ;
    border: '1px solid gold' ;
  }

  .el-table >>> .other-row {
    background-color: #f3f3f3 ;
    border: '1px solid gold' ;   
  }  
  
</style>
